<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/bm/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/thesame.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/headCss.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/rightCon.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/popCss.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/page.css" media="all">
</head>
<style type="text/css">
    .new-add-left li {
        margin-bottom: 0;
    }
</style>
<body class="layui-layout-body">
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="add-title pad25px"><span class="mr10px cursor"><img src="../static/bm/bmuserinfo/img/return_icon.png" class="return"></span><span>信息查看</span></div>
    <div class="new-add-box bgWhite box-shadows border-radius4">
        <div class="new-add-box-scroll">
            <div class="mb25px">
                <div class="new-add-title relative overflow mb15px"><span class="ml15px">基本信息</span></div>
                <div class="new-add-con new-add-form pb25px border-bot1px">
                    <article class="new-add-left new-add-form-con">
                        <ul class="overflow lh32px">
                            <li>
                                <p><label><em class="red">*</em>姓名：</label></p>
                                <p>[[${userinfo.userName}]]</p>
                            </li>
                            <li>
                                <p><label>性别：</label></p>
                                <p>[[${userinfo.userSex}]]</p>
                            </li>
                            <li>
                                <p><label><em class="red">*</em>出生日期：</label></p>
                                <p>[[${userinfo.birthDate}]]</p>
                            </li>
                            <li>
                                <p><label><em class="red">*</em>证件类型：</label></p>
                                <p>[[${userinfo.certificateType}]]</p>
                            </li>
                            <li>
                                <p><label><em class="red">*</em>证件编号：</label></p>
                                <p>[[${userinfo.userPid}]]</p>
                            </li>
                            <li>
                                <p><label><em class="red">*</em>户籍：</label></p>
                                <p>[[${userinfo.liveAddress}]]</p>
                            </li>
                            <li>
                                <p><label>民族：</label></p>
                                <p>[[${userinfo.nation}]]</p>
                            </li>
                            <li>
                                <p><label>婚姻状况：</label></p>
                                <p>[[${userinfo.marriage}]]</p>
                            </li>
                            <li>
                                <p><label><em class="red">*</em>所在地区：</label></p>
                                <p>[[${userinfo.location}]]</p>
                            </li>
                            <li>
                                <p><label><em class="red">*</em>户籍地址：</label></p>
                                <p>[[${userinfo.registerAddress}]]</p>
                            </li>
                            <li>
                                <p><label>户籍行政区：</label></p>
                                <p>[[${userinfo.registerAreaOfResidence}]]</p>
                            </li>
                            <li>
                                <p><label><em class="red">*</em>居住地址：</label></p>
                                <p>[[${userinfo.liveAddress}]]</p>
                            </li>
                            <li>
                                <p><label>居住行政区：</label></p>
                                <p>[[${userinfo.liveAreaOfResidence}]]</p>
                            </li>
                            <li>
                                <p><label>社保类型：</label></p>
                                <p>[[${userinfo.socialSecurityType}]]</p>
                            </li>
                            <li>
                                <p><label>社保卡号：</label></p>
                                <p>[[${userinfo.socialSecurityCardNo}]]</p>
                            </li>
                            <li>
                                <p><label>手机号码：</label></p>
                                <p>[[${userinfo.mobile}]]</p>
                            </li>
                            <li>
                                <p><label>固定号码：</label></p>
                                <p>[[${userinfo.tel}]]</p>
                            </li>
                            <li>
                                <p><label>文化程度：</label></p>
                                <p>[[${userinfo.degreeOfEducation}]]</p>
                            </li>
                            <li>
                                <p><label>政治面貌：</label></p>
                                <p>[[${userinfo.political}]]</p>
                            </li>
                            <li>
                                <p><label>退休单位：</label></p>
                                <p>[[${userinfo.retireCompany}]]</p>
                            </li>
                            <li>
                                <p><label>退休工资：</label></p>
                                <p>[[${userinfo.retireSalary}]]</p>
                            </li>
                            <li>
                                <p><label>职业：</label></p>
                                <p>[[${userinfo.occupation}]]</p>
                            </li>
                            <li>
                                <p><label>退休时间：</label></p>
                                <p>[[${userinfo.retireTime}]]</p>
                            </li>
                        </ul>
                    </article>
                    <article class="new-add-right">
                        <dl class="inline-block relative">
                            <dt>
                                <p class="filejs"><img th:src="(${#strings.isEmpty(userinfo.imgPath)}) ? @{/static/userinfoPrivate/userinfo/img/moren.png} : @{${userinfo.imgPath}}" class="bock"></p>
                            </dt>
                        </dl>
                    </article>
                </div>
            </div>
            <div class="mb25px">
                <div class="new-add-title relative overflow mb15px"><span class="ml15px">优惠卷信息</span></div>
                <ul class="disco-ul">
                    <li>
                        <p>
                            <span>理发券发放数/年：</span>
                            <span>[[${userinfo.totalCoupons}]]</span>
                        </p>
                        <p>
                            <span>已用券数/年：</span>
                            <span>[[${userinfo.usedCoupons}]]</span>
                        </p>
                        <p>
                            <span>剩余券数/年：</span>
                            <span>[[${userinfo.unusedCoupons}]]</span>
                        </p>
                    </li>
                    <!--<li>
                        <p>
                            <span>理发券发放数/年：</span>
                            <span>12</span>
                        </p>
                        <p>
                            <span>理发券发放数/年：</span>
                            <span>12</span>
                        </p>
                        <p>
                            <span>理发券发放数/年：</span>
                            <span>12</span>
                        </p>
                    </li>-->
                </ul>
                <nav class="layui-form more-date mt15px mb15px">
                    <p class="fb f16px mb15px">消费明细：</p>
                    <ul>

                        <li>
                            <div>时间</div>
                            <div>
                                <p class="layui-time-img">
											<span class="layui-input-inline" style="width: 160px;">
												<input type="text" id="time1" name="price_min" placeholder="请选择时间" autocomplete="off" class="layui-input test-item">
											</span>
                                    <span>&nbsp;-&nbsp;</span>
                                    <span class="layui-input-inline" style="width: 160px;">
												<input type="text" name="price_max" placeholder="请选择时间" autocomplete="off" id="test1" class="layui-input">
											</span>
                                </p>
                            </div>
                        </li>
                        <!--<li>
                            <div>状态</div>
                            <div class="select-cur">
                                <p class="green">不限</p>
                                <p>未使用</p>
                                <p>已使用</p>
                                <p>失效</p>
                            </div>
                        </li>-->
                    </ul>
                </nav>
                <div class="border1px border-radius4">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../static/bm/js/jquery-2.1.3.min.js"></script>
<script src="../static/bm/layui/layui.js" charset="utf-8"></script>
<script th:inline="javascript">

    function getData(startTime, endTime) {
        layui.use(['element', 'table', 'laydate'], function () {
            var element = layui.element;
            var table = layui.table;
            var laydate = layui.laydate;
            var userNo = [[${userinfo.id}]]
            var type = [[${type}]];
            //第一个实例
            table.render({
                elem: '#test'
                , url: '../getRecordById'
                , where: {id: userNo, type: type, startTime: startTime, endTime: endTime}
                , request: {
                    pageName: 'currentPage' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                //,count: 10  //数据总数，从服务端得到
                //,data: listData
                , page: true //开启分页
                , limit: 10 //每页显示的条数
                //,limits:[3,4,5]
                , groups: 9 //连续页码个数
                , parseData: function (res) {
                    console.log(res);
                    return {
                        "code": res.code,
                        "data": res.data.records,
                        "count": res.data.total,
                        "limit": res.data.size,
                    };
                }
                , cols:
                    [
                        [ //表头
                            {
                                field: 'id',
                                title: '序号',
                                type: 'numbers',
                            }, {
                            field: 'createdTime',
                            title: '日期',
                        }, {
                            field: 'sourceUse',
                            title: '来源/使用地点',
                        }, {
                            field: 'number',
                            title: '优惠卷明细',
                        }
                        ]
                    ]
            });
        });
    }

    $(function () {
        $('.select-cur p').click(function () {
            $(this).addClass('green').siblings().removeClass('green');
        });
        var type = [[${type}]];

        $(".return").click(function () {
            if (type == "1") {
                window.location.href = "../bmuserinfo/toHaircutInfoPage";
            } else if (type == "2") {
                window.location.href = "../bmuserinfo/toSewingInfoPage";
            }
        })

        getData("", "")

    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '.test-item'
            , type: 'datetime'
            , done: function (startTime, date) {//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                console.log(startTime);
                var endTime = $("#test1").val();
                getData(startTime, endTime);
            }
        });


        laydate.render({
            elem: '#test1'
            , type: 'datetime'
            , done: function (endTime, date) {//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                console.log(endTime);
                var startTime = $("#time1").val();
                getData(startTime, endTime);
            }
        });
    });

</script>
</body>

</html>
